<template>
  <div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="后端" name="first">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              icon="el-icon-edit"
              plain
              size="mini"
              type="success"
              @click="addOpendata"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              icon="el-icon-refresh"
              plain
              size="mini"
              type="success"
              @click="resetQuery"
            >刷新
            </el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div v-for="item in autoList">
              <el-card shadow="hover" style="width: 100%;margin-top: 10px;">
                <el-col :span="0.1">
                  <el-checkbox v-model="item.checked" @change="toggleSelection(item)"></el-checkbox>
                </el-col>
                <el-col :span="16">
                  <el-descriptions border direction="vertical">
                    <el-descriptions-item label="ip地址">{{ item.host }}</el-descriptions-item>
                    <el-descriptions-item label="用户名">{{ item.port }}</el-descriptions-item>
                    <el-descriptions-item label="密码">{{ item.port }}</el-descriptions-item>
                    <el-descriptions-item label="pom.xml文件路径">{{ item.pomPath }}</el-descriptions-item>
                    <el-descriptions-item label="maven_Home文件路径">{{ item.mavenHomePath }}</el-descriptions-item>
                    <el-descriptions-item label="jar文件路径">{{ item.jarPath }}</el-descriptions-item>
                    <el-descriptions-item label="jar包上传文件路径">{{ item.jarUploadPath }}</el-descriptions-item>
                    <el-descriptions-item label="jar包cd命令行">{{ item.cdPathCode }}</el-descriptions-item>
                    <el-descriptions-item label="启动命令">{{ item.restartCode }}</el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="1">
                  <el-link type="warning" @click="updateData((item))">修改</el-link>
                  <el-link style="margin-top: 10px;" type="warning" @click="deleteDate((item))">删除</el-link>
                </el-col>
                <el-col :span="6">
                  <el-button icon="el-icon-folder-opened" plain size="mini" type="primary" @click="topackage(item)">
                    打包
                  </el-button>
                  <el-button icon="el-icon-upload" plain size="mini" type="warning" @click="toupload(item)">上传
                  </el-button>
                  <el-button icon="el-icon-refresh" plain size="mini" type="primary" @click="torestart(item)">启动
                  </el-button>
                  <el-button icon="el-icon-video-play" plain size="mini" type="success" @click="autoPublish(item)">
                    自动发布
                  </el-button>
                </el-col>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="前端" name="second">
        <el-row :gutter="10">
          <el-col :span="1.5">
            <el-button
              icon="el-icon-edit"
              plain
              size="mini"
              type="success"
              @click="vueaddOpendata"
            >新增
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              icon="el-icon-refresh"
              plain
              size="mini"
              type="success"
              @click="getVueList"
            >刷新
            </el-button>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <div v-for="item in vueautoList">
              <el-card shadow="hover" style="width: 100%;margin-top: 10px;">
                <el-col :span="16">
                  <el-descriptions border direction="vertical">
                    <el-descriptions-item label="vue项目根路径">{{ item.vuePath }}</el-descriptions-item>
                    <el-descriptions-item label="node安装路径">{{ item.nodePath }}</el-descriptions-item>
                  </el-descriptions>
                </el-col>
                <el-col :span="1">
                  <el-link type="warning" @click="vueupdateData(item)">修改</el-link>
                  <el-link style="margin-top: 10px;" type="warning" @click="vuedeleteDate((item))">删除</el-link>
                </el-col>
                <el-col :span="6">
                  <el-button icon="el-icon-folder-opened" plain size="mini" type="primary" @click="tobuild(item)">构建</el-button>
                  <el-button icon="el-icon-upload" plain size="mini" type="warning" @click="toupload(item)">上传</el-button>
                  <el-button icon="el-icon-video-play" plain size="mini" type="success" @click="autoPublish(item)">自动发布</el-button>
                </el-col>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="addopen" title="新增后端配置" v-bind="$attrs" @close="onClose">
      <el-row :gutter="15">
        <el-form ref="opendata" :model="opendata" :rules="rules" label-width="100px" size="medium">
          <el-col :span="10">
            <el-form-item label="host" prop="host">
              <el-input v-model="opendata.host" placeholder="请输入服务器ip"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="port" prop="port">
              <el-input v-model="opendata.port" placeholder="请输入端口" type="number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="账号" prop="user">
              <el-input v-model="opendata.user" placeholder="请输入服务器用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="密码" prop="password">
              <el-input v-model="opendata.password" placeholder="请输入服务器密码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="pom文件路径" prop="pomPath">
              <el-input v-model="opendata.pomPath" placeholder="pom文件路径,项目pom文件路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="maven_home文件路径" prop="mavenHomePath">
              <el-input v-model="opendata.mavenHomePath"
                        placeholder="mavenHome路径,例如：D:\java\apache-maven-3.8.4"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="jar包路径" prop="jarPath">
              <el-input v-model="opendata.jarPath" placeholder="请输入jar包路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="jar包上传路径" prop="jarUploadPath">
              <el-input v-model="opendata.jarUploadPath" placeholder="请输入jar包路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="cd命令" prop="cdPathCode">
              <el-input v-model="opendata.cdPathCode" placeholder="请输入cd命令"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="启动命令" prop="restartCode">
              <el-input v-model="opendata.restartCode" placeholder="请输入启动命令"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="vueaddopen" title="新增前端配置" v-bind="$attrs" @close="vueonClose">
      <el-row :gutter="15">
        <el-form ref="vueopendata" :model="vueopendata" :rules="rules1" label-width="100px" size="medium">
          <el-col :span="10">
            <el-form-item label="vue项目根路径" prop="vuePath">
              <el-input v-model="vueopendata.vuePath" placeholder="请输入vue项目根路径"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="node安装路径" prop="nodePath">
              <el-input v-model="vueopendata.nodePath" placeholder="请输入node安装路径"></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="vueonClose">取消</el-button>
        <el-button type="primary" @click="vuehandleConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  autoAdd,
  deleteDate,
  gotoPackage,
  listAuto,
  restart, tobuild,
  toupload,
  vueautoAdd, vuedeleteDate,
  vuelistAuto
} from "../../api/auto/auto";

export default {
  data() {
    return {
      activeName: 'first',
      addopen: false,
      vueaddopen: false,
      autoList: [],
      vueautoList: [],
      selectedIds: [],
      rules: {
        host: [{required: true, message: "请输入ip地址", trigger: "blur"}],
        port: [{required: true, message: "请输入端口", trigger: "blur"}],
        user: [{required: true, message: "请输入用户名", trigger: "blur"}],
        password: [{required: true, message: "请输入密码", trigger: "blur"}],
        pomPath: [{required: true, message: "请输入pom文件路径", trigger: "blur"}],
        mavenHomePath: [{required: true, message: "请输入mavenHome文件路径", trigger: "blur"}],
        jarPath: [{required: true, message: "请输入jar包路径", trigger: "blur"}],
        jarUploadPath: [{required: true, message: "请输入jar包上传路径", trigger: "blur"}],
        cdPathCode: [{required: true, message: "请输入cd命令", trigger: "blur"}],
        restartCode: [{required: true, message: "请输入启动命令", trigger: "blur"}],
      },
      rules1: {
        vuePath: [{required: true, message: "请输入vue项目根路径", trigger: "blur"}],
        nodePath: [{required: true, message: "请输入node安装路径", trigger: "blur"}],
      },
      vueopendata: {
        vuePath: undefined,
        nodePath: undefined,
      },
      opendata: {
        host: undefined,
        port: undefined,
        user: undefined,
        password: undefined,
        pomPath: undefined,
        mavenHomePath: undefined,
        jarPath: undefined,
        jarUploadPath: undefined,
        cdPathCode: undefined,
        restartCode: undefined,
      },
    };
  },
  created() {
    this.getList();
    // 复制初始状态
    this.opendata = JSON.parse(JSON.stringify(this.opendata));
  },
  computed: {
    // 计算属性，用于动态设置每个 item 的 checked 状态
    checkedItems() {
      return this.autoList.map(item => ({
        ...item,
        checked: this.selectedIds.includes(item.id),
      }));
    },
  },
  watch: {
    // 监听 selectedIds 的变化，更新 checkedItems
    selectedIds: {
      handler(newVal) {
        this.autoList = this.checkedItems;
      },
      deep: true,
    },
  },
  methods: {
    handleClick(tab) {
      if (tab.index = 0) {
        this.getList();
      } else {
        this.getVueList();
      }
    },
    autoPublish(item) {
      this.$modal.loading("打包中....");
      gotoPackage(item).then(res => {

        if (res.code == 200) {
          this.$modal.msgSuccess("打包成功")
          this.$modal.loading("上传中....");
          toupload(item).then(res => {
            if (res.code == 200) {
              this.$modal.msgSuccess("上传成功")
              this.$modal.loading("启动中....");
              restart(item).then(res => {
                this.$modal.msgSuccess("启动成功")
                this.$modal.closeLoading()
              }).catch(() => {
                this.$modal.closeLoading();
              })
            }

          }).catch(() => {
            this.$modal.closeLoading();
          })
        }
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },
    deleteDate(item) {
      deleteDate(item).then(res => {
        if (res.code == 200) {
          this.getList();
          this.$modal.msgSuccess("删除成功")
        }
      })
    },
    vuedeleteDate(item) {
      vuedeleteDate(item).then(res => {
        if (res.code == 200) {
          this.getList();
          this.$modal.msgSuccess("删除成功")
        }
      })
    },
    updateData(item) {
      this.addopen = true;
      this.opendata = item;
    },
    vueupdateData(item) {
      this.vueaddopen = true;
      this.vueopendata = item;
    },
    tobuild(item) {
      this.$modal.loading("构建中....");
      tobuild(item).then(res => {
        if(res.code==200){
          this.$modal.msgSuccess("构建成功")
          this.$modal.closeLoading()
        }
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },
    topackage(item) {
      this.$modal.loading("打包中....");
      gotoPackage(item).then(res => {
        this.$modal.msgSuccess("打包成功")
        this.$modal.closeLoading()
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },

    toupload(item) {
      this.$modal.loading("上传中....");
      toupload(item).then(res => {
        this.$modal.msgSuccess("上传成功")
        this.$modal.closeLoading()
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },
    torestart(item) {
      this.$modal.loading("启动中....");
      restart(item).then(res => {
        this.$modal.msgSuccess("启动成功")
        this.$modal.closeLoading()
      }).catch(() => {
        this.$modal.closeLoading();
      })
    },
    toggleSelection(item) {
      if (item.checked) {
        this.selectedIds.push(item.id);  // 添加到 selectedIds 数组
      } else {
        const index = this.selectedIds.indexOf(item.id);
        if (index > -1) {
          this.selectedIds.splice(index, 1);  // 从 selectedIds 数组中移除
        }
      }
      console.log('Selected IDs:', this.selectedIds);
    },
    handleConfirm() {
      this.$refs['opendata'].validate(valid => {
        if (valid) {
          autoAdd(this.opendata).then(res => {
            this.$modal.msgSuccess("添加成功")
            this.opendata = JSON.parse(JSON.stringify(this.opendata));
            this.addopen = false;
            this.getList();
          })
        }
        if (!valid) return
        this.close()
      })
    },
    vuehandleConfirm() {
      this.$refs['opendata'].validate(valid => {
        if (valid) {
          vueautoAdd(this.vueopendata).then(res => {
            this.$modal.msgSuccess("添加成功")
            this.vueopendata = JSON.parse(JSON.stringify(this.opendata));
            this.vueaddopen = false;
            this.getVueList();
          })
        }
        if (!valid) return
        this.close()
      })
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    getList() {
      listAuto().then(response => {
        this.autoList = response.rows;
        this.loading = false;
      });
    },
    getVueList() {
      vuelistAuto().then(response => {
        this.vueautoList = response.rows;
        this.loading = false;
      });
    },
    onClose() {
      this.addopen = false;
      this.reset();
    },
    vueonClose() {
      this.vueaddopen = false;
      this.reset();
    },
    addOpendata() {
      this.addopen = true;
    },
    vueaddOpendata() {
      this.vueaddopen = true;
    },

    reset() {
      this.opendata = {
        host: undefined,
        port: undefined,
        user: undefined,
        password: undefined,
        pomPath: undefined,
        mavenHomePath: undefined,
        jarPath: undefined,
        jarUploadPath: undefined,
        cdPathCode: undefined,
        restartCode: undefined,
      },
        this.vueopendata = {
          vuePath: undefined,
          nodePath: undefined,
        }
    }
  },
};
</script>
